<script setup>
import { useCounterStore } from '../stores/counter.ts';
import { useRouter } from 'vue-router';

const router = useRouter()


const counter = useCounterStore()

//counter.count++
// with autocompletion ✨
//counter.$patch({ count: counter.count + 1 })
// or using an action instead
//counter.increment()

const goToAbout = () => {
    router.push('/about')
}

const addCounter = () => {
    counter.increment()
}

</script>

<template>
    <h2>HomeView</h2>
    <h1 class="text-3xl font-bold underline">
        Hello world!
    </h1>
    <button @click="goToAbout">Go to About</button>
    <button @click="addCounter">Add Counter</button>

    <div>Current Count: {{ counter.count }}</div>

</template>
<style lang="scss">
    .text-3xl {
        color: red;
        }

</style>